<template>
  <view>
    <view class="comment-item" v-for="(comment, index) in commentList" :key="index">
      <image :src="$util.img(comment.headimg || 'image/avatar.png')" class="avatar"></image>
      <view class="comment-content">
        <view class="comment-header">
          <view class="username">{{ comment.nickname }}</view>
          <view class="comment-time">{{ $util.timeStampTurnTime(comment.createtime) }}</view>
        </view>
        <view class="m-b-20">
          <text class="comment-text">{{ comment.content }}</text>
          <text
            class="color-title2 m-l-20"
            v-if="showRepply"
            @click="
              $emit('reply', {
                parent_id: 0,
                top_parent_id: comment.comment_id,
                parent_nickname: '',
                top_parent_nickname: comment.nickname,
              })
            "
            >回复</text
          >
        </view>
        <view class="reply-images" v-if="comment.image">
          <image
            v-for="(img, i) in comment.image"
            :key="i"
            :src="$util.img(img)"
            class="reply-image"
            mode="aspectFill"
            @click="previewImage(i, comment.image)"
          ></image>
        </view>
        <!-- 回复内容 -->
        <view class="reply-content" v-if="comment.child.length > 0">
          <view class="reply-item" v-for="(childItem, childIndex) in comment.child" :key="childIndex">
            <image :src="$util.img(childItem.headimg || 'image/avatar.png')" class="avatar small"></image>
            <view class="reply-detail">
              <view class="flex">
                <text class="reply-username m-r-10">{{ childItem.nickname || "匿名用户" }}</text>
                <text class="is-admin" v-if="childItem.is_admin">管理员</text>
              </view>
              <view class="reply-text">
                <text class="content-text"
                  ><text class="c-89 m-r-10">回复</text>{{ childItem.content }}
                  <text
                    class="color-title2 m-l-20"
                    v-if="showRepply"
                    @click="
                      $emit('reply', {
                        parent_id: childItem.comment_id,
                        top_parent_id: comment.comment_id,
                        parent_nickname: childItem.nickname,
                        top_parent_nickname: comment.nickname,
                      })
                    "
                    >回复</text
                  >
                </text>
              </view>
              <view class="reply-images" v-if="childItem.image">
                <image
                  v-for="(img, i) in childItem.image"
                  :key="i"
                  :src="$util.img(img)"
                  class="reply-image"
                  mode="aspectFill"
                  @click="previewImage(i, childItem.image)"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "comment",
  props: {
    showRepply: {
      type: Boolean,
      default: false, // 是否显示回复按键
    },
    commentList: {
      type: Array,
      default: () => [], // 评论列表
    },
  },
  data() {
    return {};
  },
  methods: {
    handleReply(comment) {
      this.$emit("reply", {
        parent_id: comment.id,
        parent_nickname: comment.nickname,
        top_parent_id: comment.top_parent_id,
        top_parent_nickname: comment.top_parent_nickname,
      });
    },
    previewImage(index, imageList) {
      imageList = imageList.map((item) => this.$util.img(item));
      uni.previewImage({
        current: index,
        urls: imageList,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-item {
  display: flex;
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #eeeefd;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .comment-content {
    flex: 1;

    .comment-header {
      margin-bottom: 10rpx;

      .username {
        color: #5a5f70;
      }

      .comment-time {
        font-size: 22rpx;
        color: #898d99;
      }
    }

    .comment-text {
      color: #131a33;
    }

    .reply-images {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;

      .reply-image {
        width: 127rpx;
        height: 127rpx;
        border-radius: 20rpx;
      }
    }

    .comment-actions {
      .reply-btn {
        color: #ff6600;
        font-size: 24rpx;
      }
    }

    .reply-content {
      margin-top: 20rpx;
      // padding-left: 20rpx;
      // border-left: 2px solid #eee;
      color: #666;

      .reply-item {
        display: flex;
        margin-bottom: 20rpx;

        .avatar.small {
          width: 60rpx;
          height: 60rpx;
          margin-right: 15rpx;
        }

        .reply-detail {
          flex: 1;

          .reply-username {
            color: #5a5f70;
            display: block;
            margin-bottom: 5rpx;
          }

          .is-admin {
            display: inline-flex;
            padding: 0 12rpx;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;
            background: #ff3a4c;
            color: #fff;
            font-size: 22rpx;
          }

          .reply-text {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #131a33;
            margin-bottom: 10rpx;
          }

          .content-text {
            flex: 1;
            min-width: 0; // 关键属性，确保flex子元素内容过长时能正确收缩
            word-break: break-all;
          }
        }
      }
    }
  }
}
</style>
